<template>
	<view class="cu-w-100 cu-mb-20 cu-p-10 cu-border-r-20 cu-d-flex cu-flex-column cu-j-sb cu-a-stretch"
		style="border:1px dotted #CCC;">
		<view class="cu-w-100 cu-row cu-ovr-hdn cu-j-sb">
			<view>序号：{{(ids + 1)}}</view>
		</view>
		<view class="cu-w-100 cu-ovr-hdn cu-py-10" style="max-height: 200rpx;line-height: 40rpx;">
			{{text}}
		</view>
		<view class="cu-w-100 cu-row cu-j-sb cu-py-10">
			<view class="">创建时间：{{createDate | dateFormat}}</view>
		</view>
		<view class="cu-w-100 cu-row cu-j-start cu-py-10">
			<view>过期时间：</view>
			<view>
				<block v-if="getIsExpire">
					{{expireDate | dateFormat}}
				</block>
				<block v-else>
					<uni-countdown :font-size="14" :day="days" :hour="hours" :minute="minute"
						:second="second" color="#FFFFFF" background-color="#007AFF" />
				</block>
			</view>
		</view>
		<view class="cu-row cu-j-sb cu-a-center cu-pt-10">
			<view>
				<text style="border-bottom: 1px solid #3e3e7e;">{{useWords}}</text>字符
			</view>
			<view class="cu-row cu-j-end cu-a-center">
				<view class="cu-px-20">
					<button class="mini-btn" :disabled="true" :type="state | stateColor" size="mini">{{state | stateType}}</button>
				</view>
				<view>
					<button v-if="type === 1" :disabled="!(state === 3 || state === 5) || getIsExpire" 
					@click="event('download',ids)"
					class="mini-btn" type="primary" size="mini">去下载</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const moment = require('@/store/utils/node_modules/moment');
	export default {
		name: "cu-record",
		emits: ['download'],
		props: {
			// 当前时间戳
			date: {
				type: Number,
				default: new Date().getTime()
			},
			// 类型 1 语音合成 2 试听
			type: {
				type: Number,
				default: 1
			},
			// 序号
			ids: {
				type: Number,
				default: 0
			},
			// 内容
			text: {
				type: String,
				default: ""
			},
			// 创建时间
			createDate: {
				type: Number,
				default: undefined
			},
			// 过期时间
			expireDate: {
				type: Number,
				default: undefined
			},
			// 使用字符数
			useWords: {
				type: Number,
				default: 0
			},
			// 状态
			state: {
				type: Number,
				default: 0
			},
		},
		computed: {
			getIsExpire() {
				const date = this.date
				if (date >= this.expireDate) {
					return true
				} else {
					return false
				}
			},
			
		},
		filters: {
			stateColor(vlaue) {
				let val = vlaue
				switch (vlaue) {
					case 1:
						val = "default";
						break;
					case 2:
						val = "default";
						break;
					case 3:
						val = "primary";
						break;
					case 4:
						val = "warn";
						break;
					case 5:
						val = "primary";
						break;
					case 6:
						val = "warn";
						break;
					default:
						val = "primary"
				}
				return val
			},
			stateType(vlaue) {
				let val = vlaue
				switch (vlaue) {
					case 1:
						val = "待合成";
						break;
					case 2:
						val = "合成中";
						break;
					case 3:
						val = "已合成";
						break;
					case 4:
						val = "合成失败";
						break;
					case 5:
						val = "已推送";
						break;
					case 6:
						val = "异常";
						break;
					default:
				}
				return val

			},
			dateFormat(val) {
				return moment(val).format("YYYY-MM-DD HH:mm:ss");
			}
		},
		data() {
			return {
				days:0,
				hours:0,
				minute:0,
				second:0,
			};
		},
		created() {
			this.getDays()
			this.getHours()
			this.getMinute()
			this.getSecond()
		},
		methods:{
			event(type,data){
				if(type === 'download'){
					this.$emit(type, data)
				}
			},
			getDays() {
				const date = this.date
				if (date >= this.expireDate) {
					return 0
				} else {
					const residue = this.expireDate - date
					this.days = Math.floor(residue / (24 * 60 * 60 * 1000))
				}
			},
			getHours() {
				const date = this.date
				if (date >= this.expireDate) {
					return 0
				} else {
					this.hours = moment(this.expireDate).diff(moment(this.date), 'hours') % 24
				}
			},
			getMinute() {
				const date = this.date
				if (date >= this.expireDate) {
					return 0
				} else {
					this.minute = moment(this.expireDate).diff(moment(this.date), 'minutes') % 60
				}
			},
			getSecond() {
				const date = this.date
				if (date >= this.expireDate) {
					return 0
				} else {
					this.second = moment(this.expireDate).diff(moment(this.date), 'seconds') % 60
				}
			}
		}
	}
</script>

<style lang="scss">

</style>